<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>

  <script>
    /**
     * 常见的事件：
     *    1.点击事件：
     *        1.onclick：单击事件
     *        2.ondblclick：双击事件
     *    2.焦点事件：
     *        1.onblur：失去焦点
     *            *一般用于表单校验
     *        2.onfocus：元素获得焦点
     *    3.加载事件：
     *        1.onload：一张页面或一幅图像完成加载
     *    4.鼠标事件：
     *        1.onmousedown：鼠标按钮被按下。
     *            * 定义方法时，定义一个形参，接受event对象。
     *            * event对象的 button属性可以获取哪个鼠标按钮键被点击了。
     *        2.onmouseup：鼠标按钮被松开。
     *        3.onmousemove：鼠标被移动。
     *        4.onmouseover：鼠标移到某元素之上。
     *        5.onmouseout：鼠标从某元素移开。
     *     5.键盘事件：
     *        1.onkeydown：某个键盘按键被按下。
     *        2.onkeyup：某个键盘按键被松开。
     *        3.onkeypress：某个键盘按键被按下并松开。
     *     6.选择和改变：
     *        1.onchange：域的内容被改变。
     *        2.onselect：文本被选中。
     *     7.表单事件：
     *        1.onsubmit：确认按钮被点击。
     *            *可以阻止表单的提交
     *                *方法返回 false 则表单被阻止提交
     *        2.onreset：重置按钮被点击。
     */


    //2.加载完成事件 onload
    window.onload = function (){
      //1.失去焦点事件
      document.getElementById("username").onblur = function () {
        alert("失去焦点了");
      }
      //3.绑定鼠标移动到元素之上事件
      document.getElementById("username").onmouseover = function (){
        alert("鼠标来了");
      }
      //4.绑定鼠标点击事件
      document.getElementById("username").onmousedown = function (event){
        //alert("鼠标点击了");
        alert(event.button);
      }

      //5.绑定键盘点击事件
      document.getElementById("username").onkeydown = function (event){
        alert(event.keyCode);
      }

      document.getElementById("city").onchange = function (event){
        alert("改变了。。。");
      }

      document.getElementById("form").onsubmit = function (){
        //校验用户名格式是否正确
        var flag = false;

        return flag; //方法返回false
      }
    }

    function checkForm() {
      return false;
    }
    
  </script>

</head>
<body>

<!--
  function fun(){
    return checkForm();
  }
-->

<form action="#" id="form" onclick="return checkForm();">
<input id="username" name="username">

<select id="city">
  <option>--请选择--</option>
  <option>--北京--</option>
  <option>--上海--</option>
  <option>--西安--</option>
</select>
  <input type="submit" value="提交">
</form>
</body>
</html>